<template>
<!-- lzy 2022-8-23 19点29分 -->
    <div id="OrderDetail">
        <el-card>
            <el-row style="height: 60px;line-height: 30px;">
                <el-col :span="5">
                    <span>订单编号：{{scenicOrderForm.orderNo}}</span>
                    <div v-for="item in orderStatusList" :key="item.id">
                        <span class="orderStatus" v-if="item.id == scenicOrderForm.orderStatus">{{item.status}}</span>
                    </div>
                </el-col>
                <el-col class="orderPrice_col" :span="10" :push="1">
                    <div class="orderPrice_div">
                        <span style="">总价：</span>
                        <span class="orderPrice">￥{{scenicOrderForm.price}}</span>
                    </div>
                </el-col>
                <el-col v-if="scenicOrderForm.orderStatus == 5" :span="3">
                    <el-button class="payNow" @click="payNow(scenicOrderForm.qrCode, scenicOrderForm.scenicName, scenicOrderForm.orderNo, scenicOrderForm.price)" type="warning">立即支付</el-button>
                </el-col>
            </el-row>
        </el-card>
        <el-card style="margin-top:30px;">
            <el-row style="font-size: 20px;padding: 10px 0 10px 0;border-bottom:1px solid #DDDDDD">订单信息</el-row>
            <el-row style="line-height:50px;">
                <h1>景区名称：{{scenicOrderForm.scenicName}}</h1>
            </el-row>
            <el-row>
                <el-col :span="6">预定时间：{{scenicOrderForm.purchaseTime}}</el-col>
                <el-col :span="6">使用时间：{{scenicOrderForm.startTime}}</el-col>
            </el-row>
        </el-card>
        <el-card style="margin-top:30px;">
            <el-row style="font-size: 20px;padding: 10px 0 10px 0;border-bottom:1px solid #DDDDDD">取票人信息</el-row>
            <el-row style="margin-top: 10px;line-height: 40px;">
                <el-col :span="8">{{scenicOrderForm.getTicketPerson}}</el-col>
                <el-col :span="8">{{scenicOrderForm.getTicketPhone}}</el-col>
            </el-row>
        </el-card>
        <el-card style="margin-top:30px;">
            <el-row style="font-size: 20px;padding: 10px 0 10px 0;border-bottom:1px solid #DDDDDD">购票人信息</el-row>
            <el-row>
                <el-table
                :data="userRealBindsList"
                style="width: 100%">
                <el-table-column
                    prop="realName"
                    label="真实姓名"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="identity"
                    label="身份证号"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="papersType"
                    label="证件类型"
                    width="120">
                    <template slot-scope="scope">
                        <div v-for="item in papersTypeList" :key="item.id">
                            <span v-if="item.id === scope.row.papersTypeId">{{item.papersTypeText}}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="phone"
                    label="手机号">
                </el-table-column>
                <el-table-column
                    prop="passengerTypeId"
                    label="游客类型"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <div v-for="item in passengerTypeList" :key="item.id">
                            <el-tag v-if="item.id === scope.row.passengerTypeId">{{item.passengerTypeText}}</el-tag>
                        </div>
                    </template>
                </el-table-column>
                </el-table>
            </el-row>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'OrderDetailViews',
    data () {
        return {
            // 用于获取登录账号
            loginName: '',
            // 用于获取路由传过来的订单ID
            id: '',
            // 景区订单对象
            scenicOrderForm: {},
            // 用于存放订单状态集合
            orderStatusList: [],
            // 用于存放购票人实名信息
            userRealBindsList: [],
            // 存放游客类型列表
            passengerTypeList: [],
            // 存放证件类型列表
            papersTypeList: [],
        }
    },
    mounted () {
        this.id = this.$route.query.id
        this.loginName = window.sessionStorage.getItem('loginName')
        // 初始化获取订单信息
        this.getScenicOrder()
        // 初始化获取订单状态集合
        this.getOrderStatusList()
        // 获取购票人实名信息
        this.getUserBindsListByOrderId()
		// 初始化渲染获取游客类型列别
		this.getPassengerTypeList()
		// 初始化获取证件类型列表
		this.getPapersTypeList()
    },
    methods: {
        // 获取购票人实名信息
        getUserBindsListByOrderId () {
            this.$axios.get('http://127.0.0.1:8082/orders/ScenicOrders/getUserBindsListByOrderId', {
                params: {
                    sOId: this.id
                }
            }).then(res =>{
                this.userRealBindsList = res.data.obj
            })
        },
        // 获取订单信息
        getScenicOrder () {
            this.$axios.get('http://127.0.0.1:8082/orders/ScenicOrders/getScenicOrderById',{
                params: {
                    id: this.id
                }
            }).then(res =>{
                this.scenicOrderForm = res.data.obj
            })
        },
        // 获取订单状态集合
        getOrderStatusList () {
            this.$axios.get('http://127.0.0.1:8082/orders/ScenicOrders/getOrderStatusList')
            .then(res =>{
                this.orderStatusList = res.data.obj
            })
        },
        // 获取游客类型列别
        getPassengerTypeList () {
            this.$axios.get('http://127.0.0.1:8082/passengerType/getPassengerTypeList').then(res =>{
                this.passengerTypeList = res.data.obj
            })
        },
        // 获取证件类型列表
        getPapersTypeList () {
            this.$axios.get('http://127.0.0.1:8082/papersType/getPapersTypeList').then(res =>{
                this.papersTypeList = res.data.obj
            })
        },

    }
}
</script>

<style>
#OrderDetail{
    width: 1200px;
    height: 1000px;
    margin-left: 235px;
    margin: 0 auto;
}
.orderStatus{
    font-size: 24px;
    font-weight: bold;
    color: #3366CC;
}
.orderPrice{
    font-size: 18px;
    font-weight: bold;
    color: #3366CC;
}
.orderPrice_col{
    height: 60px;
    border-left: 3px solid #DDDDDD;
}
.orderPrice_div{
    margin-left: 20px;
}
</style>
